<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="shortcut icon" href="/resources/favicon.ico"
	type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/resources/styles.css">
<script type="text/javascript" src="resources/jquery-1.7.2.min.js"></script>

<script language="javascript" type="text/javascript">
	function changeThat() {
		var registerForm = document.getElementById("registerTable");
		var loginForm = document.getElementById("loginTable");
		if (document.myForm.type[0].checked == true) {
				document.registerForm.action="/addUserAccount;jsessionid=m6zv2e81aq0s";
		} else {	
				document.registerForm.action="/login;jsessionid=m6zv2e81aq0s";
			}
	
	}
</script>



<title>Homegrown Cuisine - Register User</title>
</head>
<body background="" onload="changeThat()">
	<h1>Register User</h1>

	<a href="/">Back</a>

	<div id="userAccountDiv">
		<h2></h2>
		<p>${message}</p>




		<form action="YourActionHere" name="myForm" id="myForm">
			<input type="radio" name="type" value="register" checked
				onClick="changeThat()">register <input type="radio"
				name="type" value="login" onClick="changeThat()">login<br>

		</form>

		<form:form method="POST"  modelAttribute="userAccount"
			name="registerForm">

			<table id="registerTable">
				<tr>
					<td>Email address:</td>
					<td><form:input path="accountName" /></td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><form:input path="passcode" type="password" /></td>
				</tr>
				<tr>
					<td colspan="2"><input type="submit" value="Save"  /></td>
				</tr>

			</table>
		</form:form>





	</div>
</body>
</html>
<script type="text/javascript">
	$(document)
			.ready(
					function() {
						$('input:submit')
								.click(
										function(event) {
											$('.errorMail').hide();
											$('.errorPasscode').hide();
											$('.errorNick').hide();

											var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

											var nicknameField = $('#nickName');
											var emailaddressField = $('#accountName');
											var passcodeField = $('#passcode');

											// Validating Nickname
											if (nicknameField.val() == '') {
												nicknameField
														.after('<span class="errorNick" style="color:red;">Please enter a nickname.</span>');
												event.preventDefault();
											}

											// Validating Email (Accountname)
											if (emailaddressField.val() == '') {
												emailaddressField
														.after('<span class="errorMail" style="color:red;">Please enter your email address.</span>');
												event.preventDefault();
											} else if (!emailReg
													.test(emailaddressField
															.val())) {
												emailaddressField
														.after('<span class="errorMail" style="color:red;">Enter a valid email address.</span>');
												event.preventDefault();
											}

											// Validating Password
											if (passcodeField.val() == '') {
												passcodeField
														.after('<span class="errorPasscode" style="color:red;">Please enter a password.</span>');
												event.preventDefault();
											} else if (passcodeField.val().length < 8) {
												passcodeField
														.after('<span class="errorPasscode" style="color:red;">Password needs to be at least 8 characters.</span>');
												event.preventDefault();
											}
										})
					});
</script>